* {
	box-sizing: border-box;
	color: #000;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none
}

body {
	background: #f5f5f5;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, helvetica neue, Segoe UI, Roboto, Arial, hiragino sans gb, Noto Sans, microsoft yahei, sans-serif
}

.container,
.gonggao {
	margin: 0 auto;
	width: 100%
}

.gonggao {
	background: #151c43;
	color: #fff;
	display: none;
	height: 48px;
	padding: 0 20px;
	position: fixed;
	top: 0;
	z-index: 1000
}

.gonggao1 {
	align-items: center;
	display: flex;
	gap: 20px;
	height: 100%;
	justify-content: flex-start;
	position: relative;
	vertical-align: top;
	white-space: nowrap;
	width: 100%
}

.gonggao1 .gonggao-s {
	background: #0052d9;
	border-radius: 2px;
	border-bottom-right-radius: 0;
	color: #fff;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	padding: 0 8px;
	position: relative;
	text-align: center
}

.gonggao1 .gonggao-s:before {
	border-color: transparent transparent #0052d9 #0052d9;
	border-style: solid;
	border-width: 3px 4px;
	bottom: 0;
	content: "";
	left: 100%;
	position: absolute
}

.gonggao1 .gonggao-p {
	color: #fff;
	margin-bottom: 0 !important;
	max-width: calc(100vw - 180px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.gonggao1 .gonggao-a {
	align-items: center;
	animation: opacityLoop 5s ease-in-out infinite;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	text-decoration: none
}

.gonggao-d {
	color: #fff;
	cursor: pointer;
	display: block;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10
}

.gonggao-d img {
	height: 26px;
	width: 26px
}

@keyframes opacityLoop {
	0% {
		opacity: .8
	}

	25% {
		opacity: 1
	}

	75% {
		opacity: 1
	}

	90% {
		opacity: .8
	}

	to {
		opacity: 0
	}
}

.gonggao .gonggao-a .gonggao-s1 {
	color: #0056ff;
	display: inline-block;
	font-size: 18px;
	line-height: 20px;
	margin-left: 6px;
	overflow: hidden;
	transition: transform .4s, -webkit-transform .4s
}

.gonggao .gonggao-a:hover .gonggao-s1 {
	transform: translateX(4px)
}

.header {
	background: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000
}

.header.scrolled {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
	top: 0
}

.header.scrolled,
.header.scrolled1 {
	background: #fff !important
}

.header-top {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
	background: #FFFFFF4A;
	height: 60px;
	width: 100%

}

.header-top .container {
	align-items: center;
	display: flex;
	height: 100%;
	padding: 0 !important
	
}

.logo {
	margin: 0 30px 0 20px;
}

.logo img {
	height: 30px;
	margin-left: 15px
}

.top-nav {
	display: flex;
	gap: 25px;
	align-items: center;
	margin-left: 30px;
}

.top-nav a {
	color: #181818;
	font-size: 17px;
	line-height: 4.3;
	transition: color .3s
}

.top-nav a:hover {
	color: #1890ff
}

.top-nav a i {
	color: inherit;
	font-size: 14px;
	margin-right: 6px
}

.top-nav a:hover i {
	transform: scale(1.1)
}

.user-area {
	align-items: center;
	display: flex;
	gap: 15px;
	margin-left: auto
}

.user-area a:hover {
	color: #999
}

.search {
	display: none;
	margin-right: 20px;
	position: relative
}

.search input {
	border: 1px solid #e8e8e8;
	height: 32px;
	outline: 0;
	padding: 0 32px 0 12px;
	transition: all .3s;
	width: 148px
}

.search input:focus {
	border-color: #1890ff;
	box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
}

.search-btn {
	background: 0 0;
	border: none;
	cursor: pointer;
	padding: 4px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%)
}

.search-btn i {
	color: #999;
	transition: all .3s
}

.search input:focus+.search-btn i,
.search:hover .search-btn i {
	color: #1890ff
}

.login-register-area {
	border-left: 1px solid silver
}

.nav-item {
	color: #181818
}

.login,
.nav-item,
.register {
	font-size: 15px;
	text-decoration: none
}

.login,
.register {
	padding: 6px 16px
}

.login {
	color: #2981ff
}

.register {
	background-color: #2981ff;
	color: #fff;
	padding: 15px 32px
}

.search-dropdown {
	background-color: #fff;
	left: 0;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 1000
}

.search-dropdown .search-section {
	border-bottom: 1px solid #e8e8e8;
	padding: 10px
}

.search-dropdown .search-section .section-title {
	color: #333;
	font-size: 14px;
	margin-bottom: 10px
}

.search-dropdown .search-section .search-item {
	align-items: center;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 10px
}

.main {
	position: relative
}

.side-nav {
	border-right: 2px solid #fff;
	display: none;
	left: 10%;
	overflow: hidden;
	position: absolute;
	top: 55%;
	width: 200px;
	z-index: 1
}

.side-nav .nav-item {
	align-items: center;
	color: #181818;
	cursor: pointer;
	display: flex;
	padding: 16px 20px;
	position: relative;
	transition: all .3s
}

.side-nav .nav-item i:first-child {
	color: #181818;
	font-size: 16px;
	margin-right: 10px;
	transition: all .3s
}

.side-nav .nav-item:hover {
	background: linear-gradient(90deg, #f0f7ff, transparent)
}

.side-nav .nav-item.active {
	background: linear-gradient(90deg, #e6f7ff, transparent);
	color: #00f
}

.side-nav .nav-item.active i {
	color: #00f
}

.banner-container {
	background-color: #fff;
	flex: 1;
	overflow: hidden;
	position: relative;
	will-change: transform
}

.banner-wrapper {
	height: 31.25vw;
	position: relative
}

.banner-slide {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform-style: preserve-3d;
	width: 100%
}

.slide-content {
	background: linear-gradient(135deg, #f5f7fa, #fff);
	display: flex;
	height: 100%;
	transform: translateZ(0)
}

.slide-info {
	left: 5%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	will-change: transform;
	z-index: 1
}

.slide-info h2 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 24px
}

.slide-info p {
	color: #626266;
	font-size: 16px;
	margin-bottom: 30px
}

.btn-primary {
	background-color: #00f;
	box-shadow: 0 2px 6px rgba(24, 144, 255, .35);
	color: #fff;
	display: inline-block;
	font-weight: 500;
	padding: 12px 24px;
	text-decoration: none;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, box-shadow
}

.btn-primary:hover {
	background-color: #1d2b8e;
	box-shadow: 0 4px 12px rgba(24, 144, 255, .45);
	transform: translateY(-2px)
}

.slide-image,
.slide-image img {
	height: 100%;
	width: 100%
}

.banner-indicators {
	bottom: 5%;
	display: flex;
	gap: 8px;
	left: 45%;
	position: absolute;
	transform: translateX(-50%)
}

.indicator {
	background-color: hsla(0, 0%, 50%, .5);
	cursor: pointer;
	height: 3px;
	transition: all .3s;
	width: 30px
}

.indicator.active {
	background-color: #2981ff;
	width: 35px
}

.quick-features {
	bottom: -60px;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
	left: 8%;
	position: absolute;
	z-index: 1
}

.feature-item {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	overflow: hidden;
	padding: 15px 10px;
	position: relative;
	text-align: center;
	transition: all .3s;
	width: 270px
}

.feature-item img {
	height: 48px;
	margin-bottom: 16px;
	width: 48px
}

.feature-info {
	margin-left: 10px
}

.feature-info a:hover h3 {
	color: #00f
}

.feature-item h3 {
	color: #262626;
	font-weight: 600;
	margin-bottom: 10px
}

.feature-item p {
	color: #666;
	font-size: 14px;
	margin-bottom: 0
}

.side-toolbar {
	bottom: 100px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: fixed;
	right: 20px;
	z-index: 999
}

.toolbar-item {
	align-items: center;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	position: relative;
	transition: all .3s;
	width: 50px
}

.toolbar-item i {
	color: #333;
	font-size: 16px;
	margin-top: 6px
}

.toolbar-item img {
	object-fit: cover;
	width: 50%
}

.toolbar-tooltip {
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: 12px;
	margin-right: 10px;
	padding: 6px 12px;
	pointer-events: none;
	white-space: nowrap
}

.toolbar-content,
.toolbar-tooltip {
	border-radius: 4px;
	opacity: 0;
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	transition: all .3s
}

.toolbar-content {
	background: linear-gradient(180deg, #f2f2f2, #fff);
	border: 1px #fff solid;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	margin-right: 15px;
	min-width: 200px;
	padding: 15px;
	visibility: hidden
}

.qq-container,
.qr-container,
.service-container {
	color: #333;
	font-size: 16px;
	text-align: center
}

.service-list {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.qq-item,
.service-item {
	align-items: center;
	color: #666;
	display: flex;
	gap: 12px;
	text-decoration: none;
	transition: all .3s
}

.qr-box {
	display: flex;
	gap: 15px
}

.qr-item {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.toolbar-item {
	height: 40px;
	width: 40px
}

.toolbar-content {
	min-width: 160px
}

.qr-box {
	flex-direction: column;
	gap: 10px
}

.qr-item img {
	height: 63px;
	width: 63px
}

.chat-window.active {
	right: 80px
}

.chat-header {
	align-items: center;
	background: #1890ff;
	border-radius: 4px 4px 0 0;
	color: #fff;
	cursor: move;
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	user-select: none
}

.close-btn {
	background: 0 0;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 20px
}

.chat-messages {
	background: #f5f7fa;
	height: calc(100% - 120px);
	overflow-y: auto;
	padding: 16px
}

.message {
	border-radius: 4px;
	margin-bottom: 12px;
	max-width: 80%;
	padding: 12px;
	word-wrap: break-word;
	animation: messageSlide .3s ease-out
}

.message.system {
	background: #fff;
	border: 1px solid #e8e8e8;
	margin-right: auto
}

.message.user {
	background: #1890ff;
	color: #fff;
	margin-left: auto
}

.chat-input {
	background: #fff;
	border-top: 1px solid #f0f0f0;
	padding: 12px
}

.input-footer {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 8px
}

.char-count {
	color: #999;
	font-size: 12px
}

.send-btn {
	background: #1890ff;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	padding: 6px 16px;
	transition: all .3s
}

.send-btn:hover {
	background: #40a9ff
}

@keyframes messageSlide {
	0% {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.chat-messages::-webkit-scrollbar {
	width: 6px
}

.chat-messages::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px
}

.chat-messages::-webkit-scrollbar-track {
	background: #f5f7fa
}

.feedback-modal {
	align-items: center;
	background: rgba(0, 0, 0, .5);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1001
}

.feedback-modal.active {
	display: flex
}

.modal-content {
	background: #fff;
	border-radius: 4px;
	padding: 24px;
	width: 400px
}

.modal-content h3 {
	margin-bottom: 16px
}

.modal-content select,
.modal-content textarea {
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	margin-bottom: 16px;
	padding: 8px;
	width: 100%
}

.modal-content textarea {
	height: 120px;
	resize: none
}

.modal-content button {
	background: #1890ff;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	padding: 8px;
	width: 100%
}

.back-to-top {
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.back-to-top.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0)
}

.back-to-top i {
	color: #000
}

.back-to-top:hover {
	box-shadow: 0 5px 15px rgba(24, 144, 255, .3);
	transform: translateY(-5px)
}

.back-to-top:hover i {
	color: #0056b3
}

.back-to-top .toolbar-content {
	display: none
}

.qrcode-popup {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	display: none;
	margin-right: 16px;
	padding: 16px;
	position: absolute;
	right: 100%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%)
}

.qrcode-popup img {
	height: 120px;
	margin-bottom: 8px;
	width: 120px
}

.qrcode-popup p {
	color: #666;
	font-size: 12px
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.nav-item-wrapper {
	align-items: center;
	display: flex;
	height: 60px;
	position: relative
}

.has-dropdown {
	align-items: center;
	color: #000;
	display: flex;
	font-size: 14px;
	gap: 4px;
	height: 100%;
	padding: 0 8px
}

.has-dropdown .arrow {
	color: #666;
	font-size: 12px;
	transition: transform .3s
}

.nav-item-wrapper:hover .arrow {
	color: #1890ff;
	transform: rotate(180deg)
}

.dropdown-menu {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, 1fr);
	left: 50%;
	opacity: 0;
	top: 60px;
	transform: translateX(-50%);
	transition: all .2s ease-out;
	visibility: hidden
}

.nav-item-wrapper:hover .dropdown-menu {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	visibility: visible
}

.menu-section {
	display: flex;
	flex-direction: column;
	position: relative
}

.menu-section:first-child:after {
	background: #f0f0f0;
	bottom: 12px;
	content: "";
	position: absolute;
	right: 0;
	top: 12px;
	width: 1px
}

.menu-section h3 {
	font-weight: 500;
	margin-bottom: 4px;
	padding: 8px 24px
}

.menu-section a {
	align-items: center;
	display: flex;
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 24px;
	transition: all .2s
}

.menu-section a i {
	color: #999;
	font-size: 15px;
	transition: all .2s
}

.menu-section a:hover,
.menu-section a:hover i {
	color: #00f
}

.product-showcase {
	background: #fff;
	padding: 40px 0
}

.section-header h2 {
	font-size: 32px;
	font-weight: 600;
	color: #1f2329;
	margin-bottom: 16px;
}

.section-header p {
	align-items: center;
	color: #5f646a;
	display: flex;
	font-size: 14px;
	gap: 5px;
	justify-content: center;
	margin-bottom: 0
}

.view-all {
	color: #00f;
	font-size: 14px
}

.view-all i {
	font-size: 12px;
	margin-left: 2px
}

.product-tabs {
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 20px
}

.tab-header {
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none
}

.tab-header::-webkit-scrollbar {
	display: none
}

.tab-item {
	cursor: pointer;
	display: inline-block;
	flex: 1;
	height: 48px;
	line-height: 48px;
	position: relative;
	text-align: center;
	transition: all .3s
}

.tab-item:last-child {
	border-right: none
}

.tab-item h3 {
	align-items: center;
	color: #000;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	justify-content: center;
	margin: 0 0 5px
}

.tab-item h3 span {
	color: #666;
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px
}

.tab-item p {
	font-size: 12px;
	margin: 0 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.tab-tags {
	gap: 5px
}

.tab-tags span {
	background: #f5f5f5;
	border-radius: 2px;
	padding: 2px 6px
}

.tab-item.active {
	background-color: #68a6ff;
	color: #fff
}

.tab-item.active h3 {
	color: #fff
}

.tab-item.active .tab-tags span {
	background: #fff2f0;
	color: #00f
}

.tab-item:hover:not(.active) {
	background: #f5f5f5
}

@media screen and (max-width:768px) {
	.tab-item {
		min-width: 80px;
		padding: 12px 15px
	}

	.tab-item h3 {
		font-size: 14px
	}

	.tab-item p,
	.tab-tags {
		display: none
	}
}

.tab-item p {
	color: #666;
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 12px
}

.tab-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.tab-tags span {
	background: #f5f7fa;
	border-radius: 12px;
	color: #666;
	font-size: 12px;
	padding: 2px 10px
}

.tab-item.active .tab-tags span {
	background: #e6f7ff;
	color: #1890ff
}

.tab-content {
	padding: 0
}

.tab-pane {
	display: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, opacity
}

.tab-pane.active {
	display: block
}

.server-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr)
}

.server-card {
	gap: 15px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, box-shadow
}

.server-card:hover {
	border-color: #00f;
	box-shadow: 0 4px 12px rgba(24, 144, 255, .1);
	transform: translateY(-4px)
}

.server-info h4 {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px
}

.location {
	color: #666;
	font-size: 13px
}

.location,
.specs {
	margin-bottom: 10px
}

.specs {
	display: flex;
	flex-wrap: wrap;
	gap: 15px
}

.specs span {
	background: #f5f7fa;
	border-radius: 2px;
	color: #666;
	font-size: 13px;
	padding: 4px 12px
}

.features {
	display: flex;
	gap: 15px
}

.features span {
	align-items: center;
	background: #f5f7fa;
	border-radius: 2px;
	color: #666;
	display: flex;
	font-size: 13px;
	gap: 4px;
	padding: 4px 12px
}

.features i {
	color: #00f;
	font-size: 12px
}

.server-price {
	align-items: center;
	border-top: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 15px
}

.price {
	color: #ff4d4f;
	font-size: 20px;
	font-weight: 500
}

.price span {
	color: #999;
	font-size: 18px;
	font-weight: 400
}

.btn-buy {
	font-size: 13px;
	padding: 6px 16px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	will-change: background-color, transform
}

.btn-buy:hover {
	background: #1d2b8e;
	transform: translateY(-1px)
}

.hot-tag {
	background: #ff4d4f;
	border-radius: 0 4px 0 4px;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	position: absolute;
	right: -1px;
	top: -1px
}

@media screen and (max-width:1200px) {
	.product-tabs {
		padding: 0 15px
	}
}

@media screen and (max-width:992px) {
	.tab-header {
		flex-direction: row
	}

	.server-list {
		grid-template-columns: 1fr
	}
}

@media screen and (max-width:768px) {
	.section-header h2 {
		font-size: 24px
	}

	.section-header p {
		flex-direction: column;
		font-size: 14px
	}

	.tab-item {
		background-color: #edf2ff;
		flex: none;
		height: 38px;
		line-height: 38px;
		padding: 0;
		width: calc(33.333% - 10px)
	}

	.tab-item h3 {
		font-size: 15px;
		justify-content: center;
		margin-bottom: 0
	}

	.tab-item h3 span {
		display: none
	}
}

.server-card {
	animation: fadeInUp .5s cubic-bezier(.4, 0, .2, 1)
}

.banner-slide {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	perspective: 1000px;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, opacity
}

.banner-container:hover .slide-info {
	animation-play-state: paused
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 20px, 0)
	}

	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

.banner-slide.active .slide-info .btn-primary,
.banner-slide.active .slide-info h2,
.banner-slide.active .slide-info p {
	animation: fadeInUp .8s forwards;
	opacity: 0
}

.banner-slide.active .slide-info h2 {
	animation-delay: .2s
}

.banner-slide.active .slide-info p {
	animation-delay: .4s
}

.banner-slide.active .slide-info .btn-primary {
	animation-delay: .6s
}

.slide-info .btn-primary {
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, box-shadow
}

.slide-info .btn-primary:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 255, .3);
	transform: translateY(-2px)
}

.slide-info h2 {
	background: linear-gradient(45deg, #333 30%, #666 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .1)
}

.why-choose-us {
	background: #fff;
	padding: 40px 0
}

.features-grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0px auto;
	max-width: 1400px
}

.feature-card {
	align-items: center;
	background: #fff;
	border: 1px solid #e8e8e8;
	display: flex;
	gap: 20px;
	padding: 30px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.feature-card:hover {
	border-color: #00f;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	transform: translateY(-2px)
}

.feature-icon {
	flex-shrink: 0;
	height: 60px;
	width: 60px
}

.feature-icon img {
	height: 100%;
	object-fit: contain;
	width: 100%
}

.feature-content {
	flex: 1
}

.feature-content h3 {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px
}

.feature-content p {
	color: #666;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px
}

.feature-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.feature-tags span {
	background: #f5f7fa;
	border-radius: 2px;
	color: #666;
	font-size: 12px;
	padding: 2px 8px
}

@media screen and (max-width:992px) {
	.features-grid {
		grid-template-columns: 1fr 1fr;
		padding: 0 40px
	}
}

@media screen and (max-width:768px) {
	.feature-card {
		align-items: center;
		flex-direction: column;
		padding: 20px;
		text-align: center
	}

	.feature-icon {
		margin-bottom: 15px
	}

	.feature-tags {
		justify-content: center
	}
}

.footer {
	background: #f5f5f5
}

.service-features {
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	padding: 0 80px
}

.service-features .feature-item {
	align-items: center;
	display: flex;
	gap: 20px;
	padding: 20px 15px;
	transition: all .3s ease
}

.service-features .feature-item i {
	height: 48px;
	width: 48px
}

.service-features .feature-text h4 {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 6px
}

.service-features .feature-text p {
	color: #666;
	font-size: 14px;
	line-height: 1.6
}

.contact-section h2 {
	border-bottom: 1px dashed #ddd;
	padding: 10px 0
}

.qr-codes {
	display: flex;
	gap: 30px;
	justify-content: center
}

.qr-code {
	background: #f5f5f5;
	padding: 20px;
	text-align: center;
	transition: all .3s ease
}

.qr-code:hover img {
	transform: scale(1.5)
}

.qr-code img {
	height: 84px;
	margin-bottom: 10px;
	width: 84px
}

.qr-code span {
	color: #666;
	display: block;
	font-size: 14px
}

.footer-bottom .icp {
	align-items: center;
	color: #999;
	display: inline-flex;
	gap: 5px
}

.footer-bottom .icp:first-child:before,
.footer-bottom .icp:nth-child(2):before {
	background: url(aa9657c4148996bc7fbe.png) no-repeat 50%/contain;
	content: "";
	height: 14px;
	width: 14px
}

@media screen and (max-width:1200px) {

	.footer-content,
	.service-features {
		padding: 0 40px
	}
}

@media screen and (max-width:992px) {
	.service-features {
		flex-wrap: wrap;
		gap: 20px
	}

	.service-features .feature-item {
		width: calc(50% - 10px)
	}

	.footer-content {
		flex-wrap: wrap;
		gap: 0
	}

	.footer-section {
		flex: 0 0 calc(20% - 15px)
	}

	.contact-section {
		flex: 0 0 100%
	}
}

@media screen and (max-width:768px) {
	.footer {
		padding: 0 !important
	}

	.footer-content {
		flex-direction: column-reverse;
		margin-bottom: 0;
		padding: 20px 15px 0
	}

	.footer-section,
	.service-features {
		display: none
	}

	.footer-nav {
		margin-bottom: 25px;
		width: 100%
	}

	.footer-nav-list {
		display: grid;
		gap: 15px;
		grid-template-columns: repeat(2, 1fr)
	}

	.footer-nav-item {
		margin-bottom: 0
	}

	.footer-nav-item a {
		color: #000;
		font-size: 14px;
		opacity: .8;
		transition: opacity .3s
	}

	.footer-nav-item a:active {
		opacity: 1
	}

	.contact-section {
		align-items: center;
		flex-direction: column;
		width: 100%
	}

	.contact-section,
	.qr-codes {
		display: flex;
		margin-bottom: 0
	}

	.qr-codes {
		gap: 20px;
		justify-content: center;
		margin-top: 20px
	}

	.qr-code {
		text-align: center
	}

	.qr-code img {
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
		height: 100px;
		padding: 5px;
		width: 100px
	}

	.qr-code span {
		display: block;
		font-size: 12px;
		margin-top: 8px;
		opacity: .8
	}

	.contact-info {
		border: none;
		padding: 0;
		text-align: center
	}

	.contact-info p:nth-child(2),
	.contact-info p:nth-child(3) {
		display: none
	}

	.contact-info p {
		color: #000;
		font-size: 14px;
		margin-bottom: 10px;
		opacity: .8
	}

	.contact-info i {
		color: #000;
		margin-right: 8px
	}

	.contact-info a {
		border: 1px solid #ddd;
		color: #000;
		height: 50px;
		line-height: 50px;
		padding: 0;
		text-decoration: none;
		width: 297px
	}

	.footer-bottom {
		border: none;
		padding: 20px 15px 0;
		text-align: center
	}

	.footer-bottom p {
		font-size: 12px;
		margin: 0
	}

	.footer-bottom a {
		text-decoration: none
	}

	.footer-bottom .icp {
		display: inline-block;
		margin: 0 5px
	}

	.footer-hotline {
		background: #fff;
		margin-bottom: 20px;
		padding: 15px;
		text-align: center
	}

	.footer-hotline p {
		color: #000;
		font-size: 14px;
		margin-bottom: 5px
	}

	.footer-hotline .phone-number {
		color: #000;
		font-size: 20px;
		font-weight: 500
	}
}

@media screen and (max-width:480px) {
	.qr-codes {
		gap: 15px
	}

	.qr-code img {
		height: 90px;
		width: 90px
	}

	.footer-nav-list {
		gap: 10px
	}

	.footer-nav-item a {
		font-size: 13px
	}

	.contact-info p {
		font-size: 14px;
		font-weight: 600
	}

	.footer-hotline .phone-number {
		font-size: 18px
	}

	.footer-bottom {
		flex-direction: column;
		padding: 15px 10px 0
	}

	.footer-bottom p {
		font-size: 11px
	}
}

.global-resources {
	background: url(445fcc3373d59e23e021.jpeg) no-repeat 50%;
	background-size: 100% 100%;
	padding: 80px 0
}

.resources-content {
	background: 0 0;
	margin-top: 40px;
	min-height: 340px;
	padding: 40px 40px 0;
	position: relative
}

#earth-globe-bg {
	aspect-ratio: 5/3;
	background: 0 0;
	left: 60%;
	max-width: 600px;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 80%;
	z-index: 0
}

#earth-globe-bg canvas {
	display: block;
	height: 100% !important;
	margin: 0 auto;
	object-fit: cover;
	opacity: .7;
	pointer-events: none;
	width: 100% !important
}

.global-locations,
.text-section {
	position: relative;
	z-index: 1
}

.text-section {
	max-width: 1400px;
	margin: 0 auto;
	margin-bottom: 40px
}

.text-section .feature-item {
	align-items: flex-start;
	background: hsla(0, 0%, 100%, 0);
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 450px
}

.text-section .feature-item h3 {
	color: #333;
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 12px
}

.text-section .feature-item p {
	color: #666;
	font-size: 16px;
	line-height: 1.6
}

.global-locations {
	background-color: hsla(0, 0%, 100%, .9);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	margin-top: 40px;
	padding: 0 40px
}

.location-item {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	transition: all .3s ease
}

.location-item:hover {
	transform: translateY(-5px)
}

.flag-icon {
	background-position: 50%;
	background-size: cover;
	height: 60px;
	width: 60px
}

.location-item span {
	color: #333;
	font-size: 14px;
	font-weight: 600
}

.flag-icon.china-mainland {
	background-image: url(ad58b6a0eebf93d38510.png)
}

.flag-icon.hong-kong {
	background-image: url(02b27bbf06e4eb576152.svg)
}

.flag-icon.us {
	background-image: url(b63a63de9cb4b7fa32ee.svg)
}

.flag-icon.japan {
	background-image: url(1f9d93555e651f567479.svg)
}

.flag-icon.korea {
	background-image: url(5b7711d5ea3e83a5a118.svg)
}

.flag-icon.uk {
	background-image: url(2caafc7e42188884e3e5.svg)
}

@media screen and (max-width:992px) {
	.resources-content {
		padding: 0 40px
	}

	.global-locations {
		background-color: transparent;
		justify-content: space-between
	}

	.location-item {
		background-color: #fff;
		flex: 0 0 calc(30% - 30px);
		padding: 10px 20px
	}
}

@media screen and (max-width:768px) {
	.resources-content {
		margin-top: 0;
		padding: 50px 20px
	}

	.location-item {
		background-color: #fff;
		flex: 0 0 calc(33% - 20px);
		padding: 5px 20px
	}

	.location-item .flag-icon {
		height: 50px;
		width: 50px
	}

	.location-item span {
		font-size: 12px
	}

	.text-section .feature-item h3 {
		font-size: 16px
	}

	.text-section .feature-item p {
		display: block;
		font-size: 14px
	}
}

.news-section {
	background: #fff;
	padding: 80px 0
}

.news-content {
	display: flex;
	gap: 40px;
	max-width: 1400px;
	margin: 0 auto;
	margin-top: 40px
}

.news-sidebar {
	flex: 0 0 400px
}

.usage-terms {
	background: url(https://qiniu2.jcyun.icu/zhima119.png);
	background-blend-mode: overlay;
	background-color: hsla(0, 0%, 100%, .7);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
	height: 100%;
	overflow: hidden;
	padding: 30px;
	position: relative
}

.usage-terms:before {
	background: linear-gradient(90deg, #00f, #1890ff);
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}

.usage-terms h3 {
	align-items: center;
	color: #333;
	display: flex;
	font-size: 20px;
	font-weight: 600;
	gap: 10px;
	margin-bottom: 20px
}

.usage-terms h3:before {
	color: #00f;
	content: "\f05a";
	font-family: Font Awesome\ 5 Free;
	font-size: 18px;
	font-weight: 900
}

.usage-terms p {
	color: #666;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 20px;
	text-align: justify
}

.usage-terms .read-more {
	align-items: center;
	background: #00f;
	color: #fff;
	display: inline-flex;
	gap: 8px;
	padding: 8px 20px;
	transition: all .3s ease
}

.usage-terms .read-more:after {
	content: "\f061";
	font-family: Font Awesome\ 5 Free;
	font-size: 12px;
	font-weight: 900;
	transition: transform .3s ease
}

.usage-terms .read-more:hover {
	background: #0056b3;
	transform: translateY(-2px)
}

.usage-terms .read-more:hover:after {
	transform: translateX(3px)
}

.news-tabs {
	flex: 1
}

.tab-header {
	border-bottom: 1px solid #eee;
	gap: 30px;
	margin-bottom: 30px
}

.tab-link {
	align-items: center;
	display: flex;
	font-size: 20px;
	gap: 8px;
	padding: 12px 0;
	transition: all .3s ease
}

.tab-link:hover {
	color: #333
}

.tab-link.active {
	color: #00f;
	font-weight: 600
}

.tab-link.active:after {
	background: #00f;
	transition: all .3s ease
}

.news-list {
	display: none;
	flex-direction: column;
	gap: 15px;
	opacity: 0;
	transition: all .3s ease
}

.news-list.active {
	display: flex;
	opacity: 1
}

.news-item {
	align-items: center;
	background: #f8f9fa;
	border: 1px solid transparent;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	transition: all .3s ease
}

.news-item:hover {
	background: #fff;
	border-color: #e8e8e8;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
	transform: translateX(5px)
}

.news-title {
	align-items: center;
	color: #333;
	display: flex;
	font-size: 18px;
	gap: 8px
}

.news-title:before {
	color: #999;
	content: "\f15c";
	font-family: Font Awesome\ 5 Free;
	font-size: 14px;
	font-weight: 400;
	transition: all .3s ease
}

.news-item:hover .news-title:before {
	color: #00f;
	transform: scale(1.1)
}

.news-date {
	align-items: center;
	color: #999;
	display: flex;
	font-size: 14px;
	gap: 5px
}

.news-date:before {
	content: "\f017";
	font-family: Font Awesome\ 5 Free;
	font-weight: 400
}

@media screen and (max-width:1200px) {
	.news-content {
		padding: 0 40px
	}
}

@media screen and (max-width:992px) {
	.news-content {
		flex-direction: column
	}

	.news-sidebar {
		flex: 0 0 auto
	}
}

@media screen and (max-width:768px) {
	.news-content {
		padding: 0 20px
	}

	.tab-header {
		align-items: center;
		flex-direction: row;
		gap: 10px;
		justify-content: center;
		overflow: hidden
	}

	.news-item {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px
	}
}

.partners-section {
	background-image: url(22fb78f2feb5e333561c.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	padding: 60px 0
}

.partners-carousel {
	max-width: 1400px;
	margin: 0 auto;
	margin-top: 40px;
	position: relative
}

.carousel-container {
	overflow: hidden;
	padding: 20px 0
}

.carousel-track {
	animation: slidePartners 30s linear infinite;
	display: flex;
	gap: 30px;
	will-change: transform
}

.carousel-track.paused {
	animation-play-state: paused
}

.carousel-item {
	align-items: center;
	background: #fff;
	border: 1px solid #eee;
	display: flex;
	flex: 0 0 120px;
	justify-content: center;
	margin-top: 20px;
	padding: 20px;
	transition: all .3s ease
}

.carousel-item:hover {
	border-color: #e0e0e0;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
	transform: translateY(-5px);
	z-index: 1
}

.carousel-item img {
	max-height: 38px;
	object-fit: fill;
	width: 112px
}

@keyframes slidePartners {
	0% {
		transform: translateX(0)
	}

	to {
		transform: translateX(-2300px)
	}
}

@media screen and (max-width:1200px) {
	.carousel-track {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media screen and (max-width:992px) {
	.carousel-track {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media screen and (max-width:768px) {
	.carousel-track {
		grid-template-columns: repeat(2, 1fr)
	}
}

.mobile-nav-toggle {
	background: 0 0;
	border: none;
	color: #333;
	cursor: pointer;
	display: none;
	font-size: 24px;
	margin-left: auto;
	padding: 0 15px
}

.mobile-nav-toggle i {
	font-weight: 600
}

.mobile-nav {
	background-color: #fff;
	display: none;
	height: calc(100vh - 60px);
	left: 0;
	overflow-y: auto;
	position: fixed;
	top: 60px;
	transform: translateX(100%);
	transition: transform .3s ease;
	width: 100%;
	z-index: 2000
}

.mobile-nav.active {
	transform: translateX(0)
}

.mobile-nav-item {
	font-weight: 500;
}

.mobile-nav-item a:focus span {
	color: #07beff
}

.mobile-nav-item>a {
	align-items: center;
	color: #333;
	display: flex;
	font-size: 14px;
	justify-content: space-between;
	padding: 15px 8px 15px 20px;
	border-bottom: 1px #eee solid;
}

.mobile-submenu {
	display: none;
}

.mobile-submenu.active {
	display: block
}

.mobile-submenu-section h3 {
	color: #999;
	font-size: 16px;
	margin-bottom: 8px;
	padding-left: 10px
}

.mobile-submenu-section a {
	color: #333;
	display: block;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 10px
}

.mobile-submenu-section a i {
	color: #1890ff;
	margin-left: 10px
}

@media screen and (max-width:992px) {

	.register,
	.top-nav,
	.user-area,
	.user-area .login,
	.user-area .nav-item,
	.user-area .search {
		display: none
	}

	.mobile-nav-toggle,
	.nav-toggle {
		display: block !important;
		margin: 0;
		padding: 0 10px;
		line-height: 1;
	}

	.nav-toggle {
		font-size: 24px;
		margin-left: 0;
		padding: 0 15px
	}

	.mobile-nav {
		display: block
	}

	.logo {
		margin-right: auto;
		margin-left: 10px;
	}

	.header-top .container {
		padding: 0 10px
	}

	.user-area {
		gap: 10px
	}

	.register {
		font-size: 13px;
		padding: 20px
	}

	.main {
		margin-top: 0;
		padding: 0
	}

	.side-nav {
		display: none
	}

	.banner-wrapper {
		height: 31.25vw
	}

	.slide-info {
		left: 20%;
		text-align: center;
		top: 55%;
		transform: translate(-50%, -50%);
		width: 90%
	}

	.slide-info h2 {
		font-size: 24px;
		margin-bottom: 15px
	}

	.slide-info p {
		font-size: 14px;
		margin-bottom: 10px
	}

	.banner-indicators {
		bottom: 10%;
		left: 20%
	}

	.quick-features {
		bottom: -40%;
		gap: 15px;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		left: 15%;
		padding: 20px
	}

	.feature-item {
		width: 300px
	}
}

@media screen and (max-width:768px) {
	.banner-wrapper {
		height: 418.5px
	}

	.slide-info h2 {
		font-size: 20px
	}

	.btn-primary {
		font-size: 14px;
		padding: 8px 16px
	}
}

@media screen and (max-width:576px) {
	.quick-features {
		align-content: center;
		align-items: center;
		bottom: -120px;
		gap: 10px;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		justify-items: center;
		left: 0;
		margin-top: -40px;
		position: absolute;
		right: 0
	}

	.banner-indicators {
		bottom: 5%;
		left: 50%
	}
}

@media screen and (max-width:992px) {

	body,
	html {
		height: auto;
		position: relative;
		-webkit-overflow-scrolling: touch;
		touch-action: manipulation
	}

	.header {
		position: fixed;
		top: 48px;
		touch-action: none;
		width: 100%;
		z-index: 1000
	}

	.main {
		margin-top: 50px
	}

	.banner-container,
	.main,
	.mobile-nav {
		touch-action: pan-y;
		-webkit-overflow-scrolling: touch
	}

	.mobile-nav {
		height: calc(100vh - 60px);
		overflow-y: auto
	}

	.footer,
	.global-resources,
	.news-section,
	.partners-section,
	.product-showcase,
	.why-choose-us {
		padding: 20px 0;
		position: relative;
		touch-action: pan-y;
		z-index: 1
	}

	.side-toolbar {
		touch-action: none
	}
}

@media screen and (max-width:576px) {

	body,
	html {
		height: auto;
		position: relative;
		touch-action: manipulation;
		width: 100%
	}

	.carousel-item,
	.feature-item,
	.location-item,
	.news-item,
	.server-card,
	.tab-item,
	.toolbar-item {
		touch-action: pan-y
	}

	.header {
		top: 0
	}

	.feature-item {
		background: linear-gradient(0deg, #fff, #f5f5f5);
		max-width: 185px;
		padding: 15px 10px
	}

	.text-section .feature-item {
		margin-bottom: 20px;
		max-width: 100%
	}

	.feature-item img {
		height: 35px;
		margin-bottom: 0;
		width: 35px
	}

	.feature-item h3 {
		font-size: 14px;
		margin-bottom: 0
	}

	.feature-item p,
	.why-choose-us {
		display: none
	}

	.slide-info {
		left: 50%;
		top: 70%;
		display: none;
	}
}

@media screen and (max-width:768px) {
	.partners-section {
		background-color: #fff;
		margin-top: 20px;
		padding: 30px 0
	}

	.partners-section .section-header {
		margin-bottom: 20px;
		text-align: center
	}

	.partners-section .section-header h2 {
		font-size: 20px;
		font-weight: 600;
	}

	.partners-section .section-header p {
		color: #666;
		font-size: 14px
	}

	.partners-carousel {
		overflow: hidden;
		padding: 0
	}

	.carousel-container {
		padding: 0 15px;
		width: 100%
	}

	.carousel-track {
		animation: none;
		display: grid !important;
		gap: 15px;
		grid-template-columns: repeat(3, 1fr);
		padding: 0
	}

	.carousel-item {
		align-items: center;
		background-color: #f8f9fa;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
		display: flex;
		height: auto;
		justify-content: center;
		margin: 0;
		padding: 15px
	}

	.carousel-item img {
		max-height: 40px;
		max-width: 100%;
		object-fit: contain
	}

	.usage-terms h3 {
		font-size: 16px
	}

	.usage-terms p {
		font-size: 12px
	}

	.global-locations {
		background-color: transparent;
		bottom: -25%;
		gap: 10px;
		left: 0;
		padding: 0 10px;
		position: absolute
	}

	.cases-section {
		margin-top: 180px
	}

	.tab-item p,
	.tab-tags {
		display: none
	}
}

@media screen and (max-width:480px) {
	.carousel-track {
		flex-wrap: wrap;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 10px
	}

	.carousel-item {
		padding: 12px
	}

	.carousel-item img {
		max-height: 35px
	}

	.partners-section {
		margin-bottom: 20px
	}
}

.product-list {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.product-item {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	display: flex;
	overflow: hidden
}

.product-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px
}

.product-title h3 {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px
}

.product-title p {
	color: #666;
	font-size: 12px;
	margin-bottom: 10px
}

.product-specs {
	display: flex;
	gap: 15px;
	margin-bottom: 15px
}

.spec-item {
	color: #666
}

.product-region {
	color: #666;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 5px;
	margin-top: auto
}

.region-label,
.support-label {
	color: #999
}

.product-purchase {
	background: #f9f9f9;
	display: flex;
	flex-direction: column;
	padding: 20px;
	position: relative;
	width: 260px
}

.purchase-tag {
	background: #ff6b61;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	position: absolute;
	right: 10px;
	top: 10px
}

.purchase-options {
	color: #666;
	font-size: 12px;
	margin-bottom: 10px
}

.product-price {
	margin-bottom: 20px
}

.price-value {
	color: #ff6b61;
	font-size: 24px
}

.price-original {
	color: #999;
	font-size: 12px;
	margin: 5px 0;
	text-decoration: line-through
}

.daily-price,
.stock-info {
	color: #999;
	font-size: 12px;
	margin-top: 5px
}

.btn-purchase {
	background: #ff6b61;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 14px;
	padding: 8px;
	text-align: center;
	transition: all .3s
}

.btn-purchase:hover {
	background: #ff4d4f
}

.btn-group {
	display: flex
}

.btn-add-cart {
	background: #f2f2f2;
	border-radius: 4px;
	color: #333
}

.btn-add-cart,
.btn-buy-now {
	display: block;
	flex: 1;
	font-size: 14px;
	padding: 8px;
	text-align: center
}

.btn-buy-now {
	background: #ff6b61;
	color: #fff
}

@media screen and (max-width:768px) {
	.product-item {
		flex-direction: column
	}

	.product-purchase {
		width: 100%
	}
}

.server-grid {
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
}

.server-card {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
	padding: 20px;
	transition: all .3s ease
}

.server-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
	transform: translateY(-3px)
}

.product-badge {
	background: linear-gradient(135deg, #ff7a45, #ff4d4f);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 2px 4px rgba(255, 77, 79, .2);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	left: 20px;
	padding: 3px 10px;
	position: absolute;
	top: -1px;
	z-index: 1
}

.card-header {
	margin-bottom: 12px;
	padding-right: 65px
}

.card-header h3 {
	margin-bottom: 5px
}

.card-header h3,
.card-header p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.card-header p {
	color: #666;
	font-size: 12px;
	margin: 0
}

.card-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px
}

.spec-tag {
	background: #f5f7fa;
	border-radius: 3px;
	color: #555;
	font-size: 12px;
	padding: 3px 10px;
	transition: all .3s
}

.server-card:hover .spec-tag {
	background: #e6f7ff;
	color: #1890ff
}

.divider {
	background: #f0f0f0;
	height: 1px;
	margin: 12px 0
}

.card-region {
	margin-bottom: 15px
}

.region-item {
	color: #666;
	font-size: 12px;
	line-height: 1.8
}

.region-item .label {
	color: #999;
	display: inline-block;
	width: 45px
}

.card-price {
	margin-bottom: 18px;
	position: relative
}

.price-tag {
	background: #ff6b61;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(255, 107, 97, .15);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px;
	position: absolute;
	right: -10px;
	top: -38px
}

.price-details {
	color: #666;
	font-size: 12px;
	margin-bottom: 8px
}

.price-details a {
	color: #1890ff
}

.price-details a:hover {
	color: #40a9ff;
	text-decoration: underline
}

.actual-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 6px
}

.price-num {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
	font-size: 26px
}

.price-num,
.price-unit {
	color: #ff6b61
}

.original-price {
	flex: 1;
	margin-left: 8px;
	text-decoration: line-through
}

.price-stats {
	color: #999;
	display: flex;
	font-size: 12px;
	justify-content: space-between
}

.stock-status {
	color: #ff9800
}

.buy-btn {
	border: none;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-top: auto;
	padding: 10px;
	text-align: center;
	transition: all .3s
}

.buy-btn:hover {
	box-shadow: 0 4px 8px rgba(255, 107, 97, .3);
	color: #fff;
	transform: translateY(-1px)
}

.btn-group {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	margin-top: auto
}

.cart-btn {
	background: #f2f2f2;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	color: #333;
	font-size: 14px;
	font-weight: 500;
	padding: 10px;
	text-align: center;
	transition: all .3s
}

.cart-btn:hover {
	background: #e6e6e6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .08);
	transform: translateY(-1px)
}

@media screen and (max-width:1200px) {
	.server-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media screen and (max-width:992px) {
	.server-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:768px) {
	.server-grid {
		gap: 12px;
		grid-template-columns: repeat(2, 1fr)
	}

	.server-card {
		padding: 15px
	}

	.price-num {
		font-size: 22px
	}
}

@media screen and (max-width:576px) {
	.server-grid {
		grid-template-columns: 1fr
	}

	.btn-group {
		grid-template-columns: 1fr 1fr
	}
}

.server-grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-top: 15px
}

.card-title {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px
}

.card-title h3 {
	color: #333;
	font-size: 16px;
	font-weight: 500
}

.detail-link {
	color: #999;
	font-size: 16px
}

.detail-link:hover {
	color: #1890ff
}

.card-subtitle {
	color: #666;
	font-size: 12px;
	margin-bottom: 12px
}

.spec-value {
	color: #666;
	flex: 1;
	font-size: 12px
}

.spec-info {
	color: #ccc;
	cursor: help;
	font-size: 14px
}

.spec-info:hover {
	color: #1890ff
}

.discount-tag {
	background: #fff2f0;
	color: #ff4d4f;
	padding: 0 6px
}

.purchase-row {
	align-items: center;
	display: flex;
	margin-bottom: 8px;
	margin-top: 12px
}

.discount-label {
	background: #fff7e6;
	color: #ff7a45;
	margin-right: 8px;
	padding: 1px 5px
}

.discount-value {
	color: #ff7a45;
	font-size: 12px;
	margin-right: 5px
}

.query-link {
	color: #1890ff;
	font-size: 12px
}

.query-link:hover {
	text-decoration: underline
}

.price-row {
	margin-bottom: 15px
}

.activity-price {
	color: #ff4d4f;
	margin-right: 8px
}

.price-value {
	font-size: 22px;
	font-weight: 700
}

.action-row {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	margin-top: auto
}

.add-cart-btn {
	background: #f5f5f5;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	color: #333;
	font-size: 14px;
	padding: 8px 0;
	text-align: center
}

.add-cart-btn:hover {
	background: #e6e6e6;
	color: #333
}

.buy-now-btn:hover {
	background: #1d2b8e;
	color: #fff
}

.server-card .can-try {
	background: #00f;
	border-radius: 0 0 0 4px;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1
}

.server-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 15px;
	position: relative;
	transition: border-color .3s
}

.server-card:hover {
	border-color: #d9d9d9
}

.spec-row {
	align-items: center;
	border-bottom: 1px dashed #f0f0f0;
	display: flex;
	padding: 8px 0
}

.spec-label {
	color: #999;
	font-size: 12px;
	width: 40px
}

@media screen and (max-width:768px) {
	.server-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:576px) {
	.server-grid {
		grid-template-columns: 1fr
	}
}

.product-big-title {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px
}

.product-big-title h3 {
	margin-bottom: 4px
}

.more-link {
	color: #999;
	font-size: 18px;
	top: 10px
}

.product-big-specs {
	gap: 15px;
	margin-bottom: 10px
}

.spec-item {
	color: #f04134;
	font-weight: 500
}

.product-big-region {
	margin-top: 10px
}

.region-label {
	margin-right: 5px
}

.product-big-price {
	align-items: center;
	padding-top: 10px
}

.price-tags {
	display: flex;
	flex-direction: column;
	font-size: 12px
}

.discount-tag {
	background: #ff7a45;
	margin-bottom: 5px;
	padding: 2px 8px
}

.discount-info a {
	color: #1890ff
}

.price-number {
	font-size: 22px
}

.price-period,
.price-unit {
	font-size: 14px
}

.price-period {
	color: #ff4d4f
}

.original-price {
	margin-top: 2px
}

.original-price span {
	text-decoration: line-through
}

.price-detail {
	margin-top: 2px
}

.stock {
	color: #ff7a45
}

.buy-button {
	padding: 8px 20px;
	transition: all .3s
}

.buy-button:hover {
	background: #ff7875
}

.server-small-card {
	border: 1px solid #e8e8e8
}

.card-header {
	margin-bottom: 5px
}

.card-header h3 {
	font-weight: 500
}

.detail-arrow {
	color: #999
}

.discount-badge {
	display: inline-block
}

.card-price-row {
	margin-bottom: 8px;
	margin-top: 12px
}

.discount-badge-small {
	color: #ff7a45;
	padding: 1px 5px
}

.discount-text {
	color: #ff7a45
}

.price-num {
	font-size: 20px
}

.promo-detail {
	color: #ff7a45;
	margin-bottom: 10px
}

.cart-button,
.purchase-button {
	font-size: 12px
}

.big-card-container {
	margin-bottom: 20px
}

.product-big-card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	position: relative
}

.product-big-title {
	margin-bottom: 12px;
	padding-right: 20px;
	position: relative
}

.product-big-title h3 {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 3px
}

.product-big-title p {
	color: #666;
	font-size: 12px;
	margin: 0
}

.more-link {
	top: 50%;
	transform: translateY(-50%)
}

.product-big-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px
}

.spec-item {
	color: #f5222d;
	font-size: 14px;
	font-weight: 400
}

.product-big-region {
	margin-bottom: 15px
}

.region-label {
	color: #999;
	width: 40px
}

.region-value {
	color: #666
}

.product-big-price {
	border-top: 1px dashed #f0f0f0;
	display: flex;
	margin-top: auto;
	padding-top: 12px
}

.price-tags {
	flex-shrink: 0;
	width: 90px
}

.discount-tag {
	background: #ff4d4f;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	margin-bottom: 4px;
	padding: 2px 6px
}

.discount-info {
	color: #666;
	font-size: 12px;
	line-height: 1.5
}

.price-info {
	flex: 1;
	padding: 0 15px
}

.current-price {
	align-items: baseline;
	display: flex
}

.price-number {
	color: #ff4d4f;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 700
}

.price-period,
.price-unit {
	color: #ff4d4f;
	font-size: 14px
}

.original-price,
.price-detail {
	color: #999;
	font-size: 12px;
	margin-top: 3px
}

.price-detail {
	display: flex;
	justify-content: space-between
}

.stock {
	color: #fa8c16
}

.buy-button {
	align-self: center;
	background: #ff4d4f;
	border-radius: 2px;
	color: #fff;
	flex-shrink: 0;
	font-size: 14px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	width: 90px
}

.server-small-card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 2px;
	padding: 15px;
	position: relative
}

.card-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px
}

.card-header h3 {
	color: #333;
	font-size: 16px;
	font-weight: 400;
	margin: 0
}

.detail-arrow {
	color: #ccc;
	font-size: 16px
}

.card-desc {
	color: #666;
	font-size: 12px;
	margin-bottom: 12px;
	margin-top: 0
}

.spec-table {
	border-collapse: collapse;
	margin-bottom: 12px;
	width: 100%
}

.spec-table tr {
	border-bottom: 1px dashed #f0f0f0
}

.spec-table tr:last-child {
	border-bottom: none
}

.spec-table td {
	font-size: 12px;
	padding: 8px 0;
	vertical-align: middle
}

.spec-name {
	color: #999;
	width: 40px
}

.spec-content {
	color: #666
}

.spec-icon {
	color: #ccc;
	text-align: right;
	width: 20px
}

.discount-badge {
	background: #fff2f0;
	border-radius: 2px;
	color: #ff4d4f;
	font-size: 12px;
	padding: 0 6px;
	text-align: center;
	white-space: nowrap
}

.card-price-row {
	align-items: center;
	border-top: 1px dashed #f0f0f0;
	display: flex;
	margin: 12px 0 8px;
	padding-top: 12px
}

.discount-badge-small {
	background: #fff7e6;
	border-radius: 2px;
	color: #fa8c16;
	font-size: 12px;
	margin-right: 5px;
	padding: 1px 4px
}

.discount-text {
	color: #fa8c16;
	font-size: 12px;
	margin-right: auto
}

.query-btn {
	color: #1890ff;
	font-size: 12px
}

.price-detail-row {
	align-items: center;
	display: flex;
	margin-bottom: 5px
}

.sale-price {
	align-items: baseline;
	display: flex;
	margin-right: 8px
}

.price-num {
	color: #ff4d4f;
	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: 700
}

.price-unit {
	color: #ff4d4f;
	font-size: 12px;
	margin-left: 2px
}

.origin-price {
	color: #999;
	font-size: 12px
}

.origin-price span {
	text-decoration: line-through
}

.promo-detail {
	background: #fffbe6;
	border-left: 2px solid #fa8c16;
	border-radius: 2px;
	color: #fa8c16;
	font-size: 12px;
	margin: 8px 0 15px;
	padding: 4px 8px
}

.action-buttons {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr
}

.cart-button {
	background: #f5f5f5;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	color: #333
}

.cart-button,
.purchase-button {
	font-size: 14px;
	padding: 6px 0;
	text-align: center
}

.purchase-button {
	background: #ff4d4f;
	border: 1px solid #ff4d4f;
	border-radius: 2px;
	color: #fff
}

.big-card-container {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 0
}

.product-big-header {
	margin-bottom: 10px;
	padding-right: 25px;
	position: relative
}

.product-big-header h3 {
	color: #333;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 5px
}

.product-big-header p {
	color: #666;
	font-size: 12px;
	margin: 0
}

.more-link {
	color: #ccc;
	font-size: 16px;
	position: absolute;
	right: 0;
	top: 8px
}

.product-specs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 8px
}

.spec-red {
	color: #00f;
	font-size: 20px;
	font-weight: 600
}

.region-info {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-bottom: 15px
}

.region-row {
	color: #666;
	display: flex;
	font-size: 12px;
	line-height: 1.8;
	margin-bottom: 5px;
	width: 50%
}

.label {
	color: #999;
	width: 40px
}

.value {
	color: #666
}

.price-left,
.price-section {
	display: flex;
	padding: 0 10px 10px
}

.price-left {
	align-items: center;
	flex-shrink: 0;
	width: 100%
}

.discount-label {
	background: #00f;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	margin-bottom: 5px;
	padding: 2px 6px
}

.discount-detail {
	color: #666;
	font-size: 12px;
	line-height: 1.5
}

.discount-detail a {
	color: #1890ff
}

.price-center {
	flex: 1;
	padding: 0 15px
}

.price-main {
	align-items: baseline;
	display: flex
}

.price-amount {
	color: #00f;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 700
}

.price-suffix {
	color: #00f;
	font-size: 14px
}

.price-original span {
	text-decoration: line-through
}

.price-extra {
	color: #999;
	display: flex;
	font-size: 12px;
	justify-content: space-between;
	margin-top: 2px
}

.price-right {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	width: 200px
}

.buy-now-btn {
	background: #00f;
	color: #fff;
	font-size: 14px;
	height: 36px;
	line-height: 1.5;
	padding: 8px 0;
	text-align: center;
	width: 100%
}

.small-card-container {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 15px
}

.server-card-small {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 2px;
	padding: 15px;
	position: relative
}

.group-tag {
	background: #00f;
	border-radius: 0 0 0 4px;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	position: absolute;
	right: 0;
	top: 0
}

.card-small-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px
}

.card-small-header h3 {
	color: #333;
	font-size: 20px;
	font-weight: 600;
	margin: 0
}

.card-more {
	color: #ccc;
	font-size: 16px
}

.card-small-desc {
	color: #666;
	font-size: 12px;
	margin: 0 0 12px
}

.spec-data-table {
	border-collapse: collapse;
	margin-bottom: 0;
	width: 100%
}

.spec-data-table tr {
	border-bottom: 1px solid #e9ecf1
}

.spec-data-table tr:last-child {
	border-bottom: none
}

.spec-data-table td {
	font-size: 12px;
	padding: 8px 0;
	vertical-align: middle
}

.td-label {
	color: #999;
	width: 80px
}

.td-value {
	color: #333;
	font-size: 14px !important;
	font-weight: 600
}

.td-icon {
	color: #ccc;
	text-align: right;
	width: 20px
}

.td-discount {
	border-radius: 2px;
	color: #00f;
	font-size: 12px;
	padding: 0 6px;
	text-align: center;
	white-space: nowrap
}

.promotion-row {
	align-items: center;
	border-top: 1px solid #e9ecf1;
	display: flex;
	padding: 12px 0 8px
}

.promotion-value {
	color: #fa8c16;
	font-size: 12px;
	margin-right: auto
}

.check-link {
	color: #1890ff;
	font-size: 12px
}

.price-row {
	align-items: center;
	display: flex;
	margin-bottom: 5px
}

.price-current {
	align-items: baseline;
	display: flex;
	margin-right: 10px
}

.amount {
	color: #00f;
	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: 700
}

.unit {
	color: #00f;
	font-size: 12px;
	margin-left: 2px
}

.price-old {
	color: #999;
	font-size: 12px
}

.price-old span {
	text-decoration: line-through
}

.promotion-note {
	background: #fffbe6;
	border-left: 2px solid #fa8c16;
	border-radius: 2px;
	color: #fa8c16;
	font-size: 12px;
	margin: 8px 0 12px;
	padding: 4px 8px
}

.button-group {
	border-top: 1px solid #00f;
	display: grid;
	grid-template-columns: 1fr 1fr
}

.btn-cart {
	border-radius: 2px;
	color: #333
}

.btn-buy,
.btn-cart {
	font-size: 14px;
	padding: 6px 0;
	text-align: center
}

.btn-buy {
	background: #00f;
	border: 1px solid #00f;
	color: #fff
}

@media screen and (max-width:1200px) {
	.small-card-container {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media screen and (max-width:992px) {
	.big-card-container {
		grid-template-columns: 1fr
	}

	.small-card-container {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:768px) {
	.price-section {
		flex-direction: column
	}

	.price-center,
	.price-left,
	.price-right {
		margin-bottom: 10px;
		width: 100%
	}
}

@media screen and (max-width:576px) {
	.small-card-container {
		grid-template-columns: 1fr
	}
}

.tooltip {
	background: rgba(0, 0, 0, .8);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	max-width: 250px;
	opacity: 0;
	padding: 8px 12px;
	pointer-events: none;
	position: fixed;
	text-align: center;
	transition: opacity .2s, visibility .2s;
	visibility: hidden;
	z-index: 1000
}

.tooltip:after {
	border-color: rgba(0, 0, 0, .8) transparent transparent;
	border-style: solid;
	border-width: 6px 6px 0;
	bottom: -6px;
	content: "";
	left: 50%;
	position: absolute;
	transform: translateX(-50%)
}

.tooltip.visible {
	opacity: 1;
	visibility: visible
}

.fa-info-circle,
.spec-icon,
.td-icon i {
	cursor: help;
	transition: color .2s, transform .2s
}

.fa-info-circle:hover,
.spec-icon:hover,
.td-icon i:hover {
	color: #00f;
	transform: scale(1.1)
}

.label[style*="cursor: help"],
.spec-label[style*="cursor: help"],
.td-label[style*="cursor: help"] {
	color: #666;
	transition: color .2s
}

.label[style*="cursor: help"]:hover,
.spec-label[style*="cursor: help"]:hover,
.td-label[style*="cursor: help"]:hover {
	color: #00f
}

.submenu-item {
	align-items: center;
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 8px 10px
}

.submenu-item:hover h5 {
	color: #07beff
}

.third-level-menu {
	min-width: 200px;
	padding: 8px 0
}

.third-level-menu a {
	color: #666;
	padding: 8px 20px;
	transition: all .3s
}

.third-level-menu a:hover {
	background-color: #f5f5f5;
	color: #1890ff
}

.menu-section {
	margin-bottom: 16px
}

.menu-section:last-child {
	margin-bottom: 0
}

.menu-section h3 {
	color: #333;
	font-size: 14px;
	margin-bottom: 8px;
	padding: 0 8px
}

.menu-section a {
	color: #666;
	display: block;
	font-size: 14px;
	line-height: 1.5;
	padding: 8px
}

.menu-section a i {
	margin-right: 8px;
	text-align: center;
	width: 16px
}

.dropdown-menu {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	display: none;
	left: 80%;
	position: absolute;
	top: 100%;
	z-index: 1000
}

.nav-item-wrapper:hover .dropdown-menu {
	display: block
}

.submenu-item {
	position: relative
}

.submenu-item>a {
	align-items: flex-start;
	color: #333;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	gap: 10px;
	justify-content: center;
	padding: 5px 30px 5px 10px;
	transition: all .2s;
	white-space: nowrap;
	width: 120px
}

.submenu-item>a i {
	color: #666;
	font-size: 14px;
	margin-right: 8px
}

.third-level-menu {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	display: none;
	left: 100%;
	min-width: 180px;
	padding: 4px 0;
	position: absolute;
	top: 0
}

.submenu-item:hover .third-level-menu {
	display: block
}

.third-level-menu a {
	color: #333;
	display: block;
	font-size: 14px;
	padding: 8px 24px;
	transition: all .2s;
	white-space: nowrap
}

.third-level-menu a:hover {
	background-color: #f5f7fa;
	color: #06f
}

.submenu-item>a:after {
	color: #999;
	content: "\f054";
	display: none;
	font-family: Font Awesome\ 6 Free;
	font-size: 12px;
	font-weight: 900;
	margin-left: auto;
	margin-right: 0;
	transition: all .2s
}

@media screen and (max-width:768px) {
	.dropdown-menu {
		box-shadow: none;
		padding: 0;
		position: static
	}

	.third-level-menu {
		box-shadow: none;
		padding-left: 24px;
		position: static
	}

	.submenu-item>a:after {
		display: block;
		transform: rotate(90deg)
	}

	.spec-red,
	.tab-link {
		font-size: 18px
	}

	.news-title {
		font-size: 16px
	}

	.tab-link:before {
		font-size: 14px
	}

	.news-date {
		font-size: 12px
	}

	.td-icon i {
		display: none
	}
}

.mobile-third-menu {
	display: none;
	margin-left: 20px
}

.product-big-card-inner {
	background: url(https://qiniu2.jcyun.icu/zhima117.png) no-repeat 50%;
	background-blend-mode: overlay;
	background-color: hsla(0, 0%, 100%, .7);
	background-size: 100% 100%;
	padding: 10px
}

.nav-toggle {
	display: none
}

@media screen and (max-width:370px) {
	.feature-item {
		max-width: 160px
	}
}

.cases-section {
	background-color: #f5f5f5;
	padding: 40px 0
}

.section-header {
	margin-bottom: 30px
}

.section-title h2 {
	font-size: 32px;
	font-weight: 500;
	color: #1f2329;
	margin-bottom: 16px;
}

.section-title h2:after {
	background: #1677ff;
	border-radius: 2px;
	bottom: -10px;
	width: 50px
}

.section-desc {
	margin: 15px auto 0
}

.cases-tabs {
	margin: 0 auto;
	max-width: 1200px
}

.tab-header {
	justify-content: flex-start
}

.tab-header,
.tab-header1 {
	border-bottom: 1px solid #eaeaea;
	margin-bottom: 25px
}

.tab-header1 {
	background: #fff;
	display: flex;
	justify-content: center
}

.tab-link1 {
	color: #555;
	font-size: 16px;
	font-weight: 600;
	margin: 0 10px;
	padding: 12px 20px;
	position: relative;
	transition: all .3s
}

.tab-link1:hover {
	color: #1677ff
}

.tab-link1.active {
	color: #1677ff;
	font-weight: 600
}

.tab-link1.active:after {
	animation: tabActivate .3s ease-out;
	background: #1677ff;
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%
}

@keyframes tabActivate {
	0% {
		left: 50%;
		opacity: 0;
		width: 0
	}

	to {
		left: 0;
		opacity: 1;
		width: 100%
	}
}

.cases-pane {
	display: flex;
	height: auto;
	overflow: hidden
}

.case-left h3 {
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 5px
}

.case-subtitle {
	color: hsla(0, 0%, 100%, .7);
	font-size: 16px;
	font-style: italic;
	margin-bottom: 40px
}

.case-info p {
	color: hsla(0, 0%, 100%, .9);
	line-height: 1.7;
	margin-bottom: 25px
}

.case-example {
	align-items: center;
	background: hsla(0, 0%, 100%, .15);
	border-radius: 4px;
	color: #fff !important;
	display: inline-flex;
	font-size: 14px;
	padding: 8px 16px;
	transition: all .3s
}

.case-example i {
	color: #fff;
	margin-right: 8px
}

.case-example:hover {
	background: hsla(0, 0%, 100%, .3)
}

.case-right {
	flex: 0 0 60%
}

.case-images,
.case-right {
	align-items: center;
	position: relative
}

.case-images {
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%
}

.image-bottom,
.image-top {
	height: 100%;
	position: absolute;
	transition: transform .3s ease;
	width: 100%
}

.image-top {
	z-index: 1
}

.image-bottom {
	bottom: -13%;
	transform: translatex(-200px) scale(.75);
	width: 70% !important;
	z-index: 2
}

.image-bottom img,
.image-top img {
	height: 100%;
	width: 100%
}

@media screen and (max-width:992px) {

	.case-right,
	.cases-pane {
		height: auto
	}

	.image-bottom,
	.image-top {
		height: 100%;
		width: 100%
	}

	.tab-link1 {
		margin: 0
	}
}

@media screen and (max-width:768px) {
	.case-right {
		height: 350px;
		padding: 25px
	}

	.image-bottom {
		display: none
	}

	.tab-link1 {
		min-width: 110px;
		padding: 6px 10px;
		text-align: center
	}

	.cases-pane {
		flex-direction: column-reverse;
		height: auto;
		padding: 0 20px
	}

	.section-title h2 {
		font-size: 24px
	}

	.tab-header1 {
		align-items: center;
		background: 0 0;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: space-between;
		overflow: hidden;
		overflow-x: auto;
		scrollbar-width: none
	}

	.case-left h3 {
		font-size: 24px
	}

	.case-info p {
		font-size: 14px
	}
}

@media screen and (max-width:480px) {
	.case-right {
		padding: 0
	}

	.image-top {
		height: 100%;
		width: 100%
	}
}

.empower-pane {
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	transition: opacity .3s ease;
	will-change: opacity
}

.empower-pane.active {
	display: grid
}

.empower-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
	overflow: hidden;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform, box-shadow
}

.empower-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	transform: translateY(-5px)
}

.empower-tabs .tab-link2 {
	color: #666;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 24px;
	position: relative;
	transition: all .3s ease
}

.empower-tabs .tab-link2:after {
	background: #1890ff;
	bottom: 0;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	width: 0
}

.empower-tabs .tab-link2.active,
.empower-tabs .tab-link2:hover {
	color: #1890ff
}

.empower-tabs .tab-link2.active:after {
	width: 100%
}

@media screen and (max-width:768px) {
	.empower-tabs .tab-header {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 5px
	}

	.empower-tabs .tab-header::-webkit-scrollbar {
		display: none
	}

	.empower-tabs .tab-link2 {
		min-width: 110px;
		padding: 6px 10px;
		text-align: center
	}
}

.empower-image {
	height: 200px;
	overflow: hidden
}

.empower-image img {
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
	width: 100%
}

.empower-card:hover .empower-image img {
	transform: scale(1.05)
}

.empower-info {
	padding: 20px
}

.empower-info h3 {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px
}

.empower-info p {
	color: #666;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 15px
}

.empower-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.empower-tags span {
	background: rgba(24, 144, 255, .1);
	border-radius: 4px;
	color: #1890ff;
	font-size: 12px;
	padding: 4px 12px
}

@media screen and (max-width:992px) {
	.empower-pane {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media screen and (max-width:768px) {
	.empower-pane {
		grid-template-columns: 1fr
	}

	.empower-image {
		border-radius: 12px;
		height: 160px
	}

	.empower-card {
		border-radius: 12px;
		padding: 15px
	}

	.empower-content {
		padding: 0 20px
	}
}

.xiaosou {
	border-radius: 50px;
	height: auto
}

.xiaosou_a {
	align-items: center;
	background: linear-gradient(135deg, #fff, #2b84d7);
	border-radius: 50px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 2px
}

.xiaosou img {
	border-radius: 50%;
	height: 100%;
	width: 100%
}

.xiaosou_span {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 10px;
	width: 15px
}

@media screen and (max-width:768px) {
	.xiaosou_span {
		font-size: 12px;
		line-height: 1.4;
		width: 12px
	}

	.xiaosou_a {
		gap: 5px
	}

	.empower-info {
		margin-top: 20px;
		padding: 0
	}
}

.custom-product-dropdown {
	background: #f7f8fa;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
	box-sizing: border-box;
	display: flex !important;
	flex-wrap: wrap;
	gap: 36px;
	position: absolute;
	top: 60px !important;
	transform: translateX(-50%) !important;
	transition: width .2s;
	z-index: 2000 !important
}

.custom-product-dropdown .dropdown-col {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 14px;
	max-width: 260px;
	min-width: 180px;
	padding: 10px 15px;
	word-break: break-all
}

.custom-product-dropdown .dropdown-title {
	color: #1880ff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 16px;
	text-align: left
}

.custom-product-dropdown .dropdown-link {
	align-items: center;
	background: 0 0;
	border-radius: 3px;
	color: #222;
	display: flex;
	font-size: 15px;
	line-height: 2.2;
	padding: 0;
	text-align: left;
	transition: color .2s, background .2s;
	white-space: normal
}

.custom-product-dropdown .dropdown-link:hover {
	background: #f5f8ff;
	color: #1880ff
}

.custom-product-dropdown .with-tag {
	align-items: center;
	display: flex;
	gap: 8px
}

.custom-product-dropdown .tag {
	border-radius: 12px;
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	margin-left: 8px;
	padding: 2px 12px
}

.custom-product-dropdown .tag-hot {
	background: #ff4d4f;
	color: #fff
}

.custom-product-dropdown .tag-discount {
	background: linear-gradient(90deg, #1890ff 60%, #40c9ff);
	color: #fff
}

.custom-product-dropdown .tag-free {
	background: #1890ff;
	color: #fff
}

.dropdown-h4 {
	background-image: url(cc06b8bd812620b9df24.png);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 250px !important;
	padding: 25px 15px
}

.dropdown-h4 h3 {
	color: #222;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 16px
}

.dropdown-h4 p {
	color: #666;
	line-height: 2
}

@media (max-width:1200px) {
	.custom-product-dropdown {
		gap: 18px;
		max-width: 98vw;
		min-width: 700px;
		padding: 18px 8px 8px
	}

	.custom-product-dropdown .dropdown-col {
		max-width: 200px;
		min-width: 140px
	}
}

@media (max-width:900px) {
	.custom-product-dropdown {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px 4px 8px;
		width: 98vw
	}

	.custom-product-dropdown .dropdown-col {
		max-width: 48vw;
		min-width: 45vw
	}
}

@media (max-width:700px) {
	.custom-product-dropdown {
		flex-direction: column;
		gap: 0;
		padding: 8px 2vw
	}

	.custom-product-dropdown .dropdown-col {
		margin-bottom: 18px;
		max-width: 100%;
		min-width: 100%
	}
}

.empower-section {
	background: #fff;
	overflow: hidden;
	padding: 60px 0;
	position: relative
}

.empower-section:before {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background: linear-gradient(90deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .7));
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1
}

.empower-section .container {
	padding: 0 15px;
	position: relative;
	z-index: 2
}

.empower-section .container,
.empower-tabs {
	margin: 0 auto;
	max-width: 1200px
}

.empower-content {
	margin-top: 30px;
	min-height: 400px;
	position: relative
}

.empower-pane {
	display: none;
	opacity: 0;
	transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
	width: 100%
}

.empower-pane.active {
	align-items: stretch;
	display: flex;
	gap: 40px;
	justify-content: space-between;
	opacity: 1
}

@media screen and (max-width:992px) {
	.empower-pane.active {
		flex-direction: column;
		gap: 30px
	}

	.case-left,
	.case-right {
		flex: 0 0 100%
	}

	.case-image {
		aspect-ratio: 16/9
	}
}

@media screen and (max-width:768px) {
	.empower-section {
		padding: 40px 0
	}

	.tab-header {
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 10px
	}

	.tab-link {
		font-size: 14px;
		padding: 10px 16px;
		white-space: nowrap
	}

	.case-right h3 {
		font-size: 20px
	}

	.case-info p {
		font-size: 14px
	}

	.case-buttons {
		flex-direction: column
	}

	.case-btn {
		text-align: center;
		width: 100%
	}
}

.empower-section {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	transition: background-image .5s ease
}

.empower-section[data-bg=finance] {
	background-image: url(5e1e428a031c741a186a.png)
}

.empower-section[data-bg=enterprise] {
	background-image: url(145937c3737e9d56e892.png)
}

.empower-section[data-bg=culture] {
	background-image: url(5e1e428a031c741a186a.png)
}

.empower-section[data-bg=media] {
	background-image: url(145937c3737e9d56e892.png)
}

.empower-section[data-bg=entertainment] {
	background-image: url(5e1e428a031c741a186a.png)
}

.cases-section {
	background: linear-gradient(135deg, #f7f9fc, #eef2f7);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	overflow: hidden;
	padding: 80px 0;
	position: relative;
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
	width: 100%
}

.cases-section:before {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background: linear-gradient(90deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .7));
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1
}

.cases-section .container {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 15px;
	position: relative;
	z-index: 2
}

.cases-section.bg-1 {
	background: linear-gradient(to bottom right, #f7f9fc, #eef2f7)
}

.cases-section.bg-2 {
	background: linear-gradient(to bottom right, #f8f9fc, #f0f3f8)
}

.cases-section.bg-3 {
	background: linear-gradient(to bottom right, #f9fafd, #f1f4f9)
}

.cases-section.bg-4 {
	background: linear-gradient(to bottom right, #f7f9fc, #eef2f7)
}

.cases-section.bg-5 {
	background: linear-gradient(to bottom right, #f8f9fc, #f0f3f8)
}

.section-header {
	margin-bottom: 40px;
	text-align: center
}

.section-title,
.section-title h2 {
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative
}

.section-title h2 {
	font-size: 32px;
	font-weight: 500;
	color: #1f2329;
	margin-bottom: 16px;
}

.section-title h2:after {
	background: #007bff;
	border-radius: 3px;
	bottom: -12px;
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 40px
}

.section-desc {
	color: #666;
	font-size: 15px;
	margin: 20px auto 0;
	max-width: 700px
}

.cases-tabs {
	margin-bottom: 40px;
	overflow: hidden;
	overflow-y: auto;
	width: 100%
}

.tab-header {
	align-items: center;
	background: 0 0;
	border: none;
	display: flex;
	justify-content: space-evenly;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative
}

.tab-header:after {
	background: #eee;
	bottom: 0;
	content: "";
	height: 1px;
	left: 50%;
	max-width: 1000px;
	position: absolute;
	transform: translateX(-50%);
	width: 100%
}

.tab-link {
	background: 0 0;
	border: none;
	color: #666;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .3px;
	margin: 0;
	padding: 12px 24px;
	position: relative;
	transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.tab-link.active,
.tab-link:hover {
	color: #007bff
}

.tab-link.active:after {
	background: #007bff;
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1
}

.cases-content {
	min-height: 400px;
	position: relative;
	width: 100%
}

.cases-pane {
	backdrop-filter: blur(10px);
	background: linear-gradient(90deg, hsla(0, 0%, 100%, .2), hsla(0, 0%, 100%, .2));
	display: none;
	opacity: 0;
	padding: 10px;
	transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
	width: 100%
}

.cases-pane.active {
	align-items: stretch;
	display: flex;
	gap: 40px;
	justify-content: space-between;
	opacity: 1
}

.case-left {
	align-items: center;
	display: flex;
	flex: 0 0 45%;
	margin: 0;
	padding: 0
}

.case-image {
	aspect-ratio: 4/3;
	box-shadow: 0 15px 30px rgba(0, 0, 0, .08);
	overflow: hidden;
	position: relative;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	width: 100%
}

.case-image:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
	transform: translateY(-8px)
}

.case-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%
}

.case-right {
	align-items: flex-start;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 20px 0
}

.case-right h3 {
	color: #333;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 20px;
	padding: 0
}

.case-info {
	flex-grow: 1;
	margin: 0 0 25px
}

.case-info p {
	color: #666;
	font-size: 15px;
	line-height: 1.6;
	margin: 0
}

.related-products {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 25px
}

.related-products span {
	align-items: center;
	border-radius: 4px;
	color: #007bff;
	display: inline-flex;
	font-size: 13px;
	margin: 0;
	padding: 6px 12px;
	transition: all .3s ease
}

.related-products span:hover {
	background: rgba(0, 123, 255, .12);
	transform: translateY(-1px)
}

.related-products span i {
	font-size: 14px;
	margin-right: 8px
}

.service-features1 {
	margin: 0
}

.feature-item1 {
	align-items: flex-start;
	display: flex;
	height: 40px;
	padding: 0
}

.feature-icon1 {
	color: #007bff;
	flex-shrink: 0;
	font-size: 14px;
	margin: 3px 12px 0 0
}

.feature-text {
	color: #666;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	text-align: left
}

.case-buttons {
	display: flex;
	gap: 12px;
	margin-top: 20px
}

.case-btn {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	justify-content: center;
	letter-spacing: .3px;
	padding: 10px 24px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.case-btn:not(.outline) {
	background-color: #007bff;
	color: #fff
}

.case-btn:not(.outline):hover {
	background-color: #0056b3;
	border-color: #0056b3;
	box-shadow: 0 5px 15px rgba(0, 123, 255, .3);
	transform: translateY(-2px)
}

.case-btn.outline {
	background-color: transparent;
	color: #007bff
}

.case-btn.outline:hover {
	background-color: #007bff;
	box-shadow: 0 5px 15px rgba(0, 123, 255, .3);
	color: #fff;
	transform: translateY(-2px)
}

@media screen and (max-width:1200px) {
	.cases-section {
		padding: 60px 0
	}

	.section-title h2 {
		font-size: 28px
	}

	.case-right h3 {
		font-size: 24px
	}
}

@media screen and (max-width:992px) {
	.cases-section {
		padding: 60px 0
	}

	.section-header {
		margin-bottom: 30px
	}

	.cases-pane.active {
		flex-direction: column;
		gap: 30px
	}

	.case-left,
	.case-right {
		flex: 0 0 100%
	}

	.case-right {
		padding: 0
	}

	.case-image {
		aspect-ratio: 16/9;
		margin: 0 auto;
		max-width: 100%
	}
}

@media screen and (max-width:768px) {
	.cases-section {
		margin-top: 100px;
		padding: 50px 0
	}

	.section-title h2 {
		font-size: 24px
	}

	.tab-header {
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 0 10px
	}

	.tab-link {
		font-size: 18px;
		padding: 10px 16px
	}

	.case-right h3 {
		font-size: 20px;
		margin: 0 0 15px
	}

	.case-info p {
		font-size: 14px
	}

	.case-buttons {
		flex-direction: row;
		flex-wrap: nowrap
	}

	.case-btn {
		width: 100%
	}

	.gonggao {
		display: none
	}
}

@media screen and (max-width:576px) {
	.case-right h3 {
		font-size: 20px
	}

	.case-info p {
		font-size: 14px
	}

	.related-products {
		gap: 10px
	}

	.related-products span {
		font-size: 13px;
		padding: 6px 12px
	}

	.case-btn,
	.feature-text {
		font-size: 14px
	}

	.case-btn {
		padding: 10px 20px
	}

	.slide-info .case-btn {
		display: none
	}
}

.related-products-img {
	height: 30px;
	margin-right: 8px;
	object-fit: cover;
	width: 30px
}